<template>
    <div class="choose-lesson">
        <!--this is ChooseLesson.html!-->
        <head-v>
            <div slot='search' class="search-control">
                <span><i class="icon-search"></i></span>
                <input type="text" name="search" class="search-input" placeholder="输入课程名称">
            </div>
            <go-back slot="goback"></go-back>
        </head-v>
        <div class="nav-list">
            <ul class="dropdown">
                <li class="drop-down-title" v-for="(todo,index) in todos" tabindex="-1" @click="dropdown(todo.id,todo.flag,index)" @blur="hide(todo.id)" >
                    {{todo.text}}
                    <span><i class="icon-angle-down"></i></span>
                    <div class="drop-down-list" :id="todo.id">
                        <ul>
                            <li v-for="dropdown in todo.items" @click="choice($event)">
                                {{dropdown.text}}
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div class="course-list">
            <ul>
                <li v-for="(courseinfo,index) in courseinfos">
                    <cou-info :index= 'index' :src="courseinfo.src" :courseName="courseinfo.courseName" :oldPrice="courseinfo.oldPrice" :newPrice="courseinfo.newPrice" :to="courseinfo.to"></cou-info>
                </li>
            </ul>
        </div>
        <back-top></back-top>
    </div>
</template>
<script>
    /*ChooseLesson.vue*/
    import Header from '../Header.vue'
    import CourseInfo from '../CourseInfo.vue'
    import GoBack from '../../components/GoBack.vue'
    import BackTop from '../../components/BackTop.vue'
    import { Toast } from 'mint-ui'
    import 'mint-ui/lib/toast/style.css'
    export default{
        data:function(){
            return{
                todos:[
                    {text:"领域",id:"field",flag:"false",items:[{text:"数学"},{text:"物理"},{text:"化学"}]},
                    {text:"产品线",id:"productLine",flag:"false",items:[{text:"移动业务"},{text:"服务端业务"},{text:"核心安全业务"}]},
                    {text:"证书",id:"certificate",flag:"false",items:[{text:"注会"},{text:"注税"},{text:"注金"}]}
                ],
                courseinfos:[
                    { src:"../../static/lux_1.jpg",courseName:"Lux教学视频",oldPrice:"500",newPrice:"100",to:"a" },
                    { src:"../../static/lux_1.jpg",courseName:"Lux教学视频",oldPrice:"500",newPrice:"100",to:"a" },
                    { src:"../../static/lux_1.jpg",courseName:"Lux教学视频",oldPrice:"500",newPrice:"100",to:"a" },
                    { src:"../../static/lux_1.jpg",courseName:"Lux教学视频",oldPrice:"500",newPrice:"100",to:"a" },
                    { src:"../../static/lux_1.jpg",courseName:"Lux教学视频",oldPrice:"500",newPrice:"100",to:"a" },
                    { src:"../../static/lux_1.jpg",courseName:"Lux教学视频",oldPrice:"500",newPrice:"100",to:"a" },
                    { src:"../../static/lux_1.jpg",courseName:"Lux教学视频",oldPrice:"500",newPrice:"100",to:"a" },
                    { src:"../../static/lux_1.jpg",courseName:"Lux教学视频",oldPrice:"500",newPrice:"100",to:"a" },
                    { src:"../../static/lux_1.jpg",courseName:"Lux教学视频",oldPrice:"500",newPrice:"100",to:"a" },
                ],
                toastText:"",
            }
        },
        methods:{
            //显示下拉菜单
            dropdown:function(id,flag,index){
                var list = document.getElementById(id)
                this.todos[index].flag=!this.todos[index].flag;
                list.style.display=flag?"block":"none"
            },
            //隐藏下拉菜单
            hide:function(id){
                var list = document.getElementById(id)
                for(var i=0;i<this.todos.length;i++){
                    if(this.todos[i].id==id){
                        this.todos[i].flag=true
                    }
                }
                list.style.display="none"
            },
            choice:function(e){
                var current = e.target
                var parent = current.parentNode
                var bros = parent.childNodes
                for(var i=0;i<bros.length;i++){
                    if(current==bros[i] && current.style.background==""){
                        bros[i].style.background="rgba(0,206,169,1)"
                        console.log(bros[i].innerText)
                        let instance = Toast({
                            message:bros[i].innerText,
                            position:"middle",
                            duration:1000
                        })
                        setTimeout(()=>{
                            instance.close()
                        },1000)
                    }else{
                        bros[i].style.background=""
                    }
                }
            }
        },
        components:{
            HeadV:Header,
            CouInfo:CourseInfo,
            GoBack,
            BackTop,
        }
    }
</script>
<style lang="scss">
    /*ChooseLesson.vue*/
    @import "../../assets/css/function.scss";
    .choose-lesson{
        .search-control{
                height:100%;
                display:flex;
                justify-content:center;
                align-items:center;
            .search-input{
                width:pxToRem(175px);
                height:pxToRem(25px);
                max-height:30px;
                border-radius:pxToRem(10px);
                padding-left:pxToRem(35px);
                outline:none;
                border:none;
                background-color:rgb(215,215,215);
                color:#666;
            }
            span{
                position:absolute;
                left:pxToRem(65px);
                height:100%;
                display:flex;
                justify-content:center;
                align-items:center;
                font-size:18px;
            }
        }
        .nav-list{
            background:#fff;
            .dropdown{
                overflow:hidden;
                height:pxToRem(60px);
                max-height:60px;
                width:100%;
                display:flex;
                justify-content:center;
                align-items:center;
                font-size:18px;
                .drop-down-title{
                    float:left;
                    list-style:none;
                    font-size:16px;
                    font-family:"微软雅黑";
                    width:pxToRem(106.7px);
                    text-align:center;
                    border-right:1px solid #ccc;
                    span{
                        margin-left:pxToRem(5px);
                        .icon-angle-down{
                            color:#333;
                        }
                    }
                    .drop-down-list{
                        position:absolute;
                        display:none;
                        width:pxToRem(106px);
                        padding-top:5px;
                        ul{
                            background:rgba(255,255,255,0.8);
                            li{
                                list-style:none;
                                padding:5px;
                            }
                        }
                    }                    
                }
                .drop-down-title:focus{
                    outline:none;
                }
                li:last-child{
                    border-right:none;
                }
            }
        }
        .course-list{
            overflow:hidden;
            padding-bottom:pxToRem(60px);
            margin-top:pxToRem(10px);
            ul{
                overflow:hidden;
                background:#fff;
                li{                    
                    list-style:none;
                }
            }
        }
    }
</style>